<!doctype html>
<html>
<head>
	<link href="../../jquery/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css" />
	<style>
		body {
			text-align : center;
		}
	</style>
	<script src="../../jquery/jquery.js"></script>
	<script src="../../jquery/jquery-ui/jquery-ui.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#dialog").dialog({
				autoOpen: false,
				modal : true,
				buttons: {
					"OK" : function() { $(this).dialog("close"); },
					"Cancle" : function() { $(this).dialog("close"); }
				},
				maxWidth : 400,
				maxHeight : 300,
				minWidth: 200,
				minHeight: 150,
				hide : "fade",
				show : 'fade'
			});
			
			$("#btn").click(function() {
				$("#dialog").dialog('open');
				return false;
			});
		});
	</script>
</head>
<body>
	<p>
		<button id="btn">Open the dialog</button>
	</p>
	<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</body>
</html>